<template>
  <div class="communication">
    <my-tabs :tab-list="tabList"></my-tabs>
    <template v-if="$util.isDef(dataList)">
      <div class="communication-box" v-if="dataList.length > 0">
        <div class="item" v-for="(item, index) in dataList" :key="index">
          <div class="content">{{ item.content }}</div>
          <el-row type="flex" align="middle" justify="space-between">
            <div class="left">
              <span class="time">{{ item.create_time | parseTime('{y}-{m}-{d}') }}</span>
              <span class="title" @click="handleNext(item)">来自{{ item.course_title }}</span>
            </div>
            <el-row type="flex" align="middle" class="star"
              >评分<edu-rate :value.sync="item.star" :args="argsStar"></edu-rate>
            </el-row>
          </el-row>
        </div>
      </div>
      <edu-no-data v-else text="暂无评论"></edu-no-data>
    </template>
  </div>
</template>

<script>
import MyTabs from '../components/myTab'
import EduNoData from '@/components/EduNoData'
import EduRate from '@/components/EduRate'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduRate
  },
  data() {
    return {
      tabList: [
        {
          title: '我的评论'
        }
      ],
      dataList: null,
      argsStar: {
        max: 5,
        disabled: true
      }
    }
  },
  created() {
    this.handleCommunicationInit()
  },
  methods: {
    // 初始化
    handleCommunicationInit() {
      this.$api.getCourseCommentMine(
        {
          page: this.$store.getters['paginate/page'],
          count: 32
        },
        res => {
          this.dataList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: res.data.total
          })
        }
      )
    },
    // 下一页
    handleNext(item) {
      this.$router.push({ path: '/course/' + item.course_id })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.communication {
  .communication-box {
    .item {
      padding: 15px 0;
      border-bottom: 1px solid $border-color-divider;
      .content {
        color: $text-color-secondary;
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 10px;
      }
      .left {
        display: flex;
        align-items: center;
      }
      .time {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
      .title {
        font-size: 12px;
        margin-left: 5px;
        max-width: 620px;
        cursor: pointer;
        @include ellipsis();
        @include edu-color-auxiliary;
      }
      .star {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
    }
  }
}
</style>
